<template>
  <div>
    <CategorySelector :disabled="!isShowAttrList" />
    <AttrList
      v-if="isShowAttrList"
      @setIsShowAttrList="isShowAttrList = $event"
      @setAttr="attr = $event"
    />
    <SaveOrUpdate
      v-else
      @setIsShowAttrList="isShowAttrList = $event"
      :attr="attr"
      @setAttr="attr = $event"
    ></SaveOrUpdate>
  </div>
</template>

<script lang="ts">
export default {
  name: "XAttr",
}
</script>

<script lang="ts" setup>
import { ref, reactive } from "vue"
// import SaveOrUpdate from "@/views/product/attr/components/SaveOrUpdate.vue"
import SaveOrUpdate from "./components/SaveOrUpdate.vue"
import CategorySelector from "@/components/CategorySelector/index.vue"
import AttrList from "./components/AttrList.vue"
import type { attrItem } from "@/api/product/model/attrModel"
const isShowAttrList = ref(true)
const attr = reactive<attrItem>({
  id: 0,
  attrName: "",
  attrValueList: [],
})
</script>

<style scoped></style>
